<template>
  <header class="main-header">
    <div class="top-bar">
      <div class="container top-bar-content">
        <div class="logo-section">
          <img src="../assets/logo.png" alt="国家铁路局" class="logo">
        </div>
        <div class="info-section">
          <div class="accessibility">无障碍阅读</div>
          <div class="date-time">{{ currentDate }}</div>
          <div class="search-bar">
            <input type="text" placeholder="请输入您要搜索的内容">
            <button>搜索</button>
          </div>
        </div>
      </div>
    </div>
    <nav class="navigation-bar">
      <div class="container">
        <ul>
          <li><a href="#"><i class="icon-home"></i>首页</a></li>
          <li><a href="#"><i class="icon-org"></i>组织机构</a></li>
          <li><a href="#"><i class="icon-news"></i>新闻资讯</a></li>
          <li><a href="#"><i class="icon-info"></i>信息公开</a></li>
          <li><a href="#"><i class="icon-duty"></i>监管履职</a></li>
          <li><a href="#"><i class="icon-comm"></i>互动交流</a></li>
          <li><a href="#"><i class="icon-services"></i>网上办事</a></li>
          <li><a href="#"><i class="icon-special"></i>专题专栏</a></li>
        </ul>
      </div>
    </nav>
  </header>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const currentDate = ref('');

const updateDate = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = now.getMonth() + 1;
  const day = now.getDate();
  const weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][now.getDay()];
  currentDate.value = `${year}年${month}月${day}日 ${weekday}`;
};

onMounted(() => {
  updateDate();
});
</script>

<style scoped lang="scss">
.main-header {
  font-family: 'Microsoft YaHei', '黑体', '宋体', sans-serif;
}

.container {
  max-width: 1200px; /* 定义版心宽度 */
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.top-bar {
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}

.top-bar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-section {
  display: flex;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;

  .logo {
    height: 60px;
    margin-right: 15px;
  }

}

.info-section {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #666;

  .accessibility {
    margin-right: 20px;
    cursor: pointer;
  }

  .date-time {
    margin-right: 20px;
  }

  .search-bar {
    display: flex;
    
    input {
      border: 1px solid #ccc;
      padding: 8px 10px;
      border-right: none;
    }

    button {
      background-color: #c81e1f;
      color: white;
      border: none;
      padding: 8px 20px;
      cursor: pointer;
    }
  }
}

.navigation-bar {
  background-color: #1d559f;
  
  ul {
    display: flex;
    justify-content: flex-start; /* 从左侧开始对齐 */
    list-style: none;
    margin: 0;
    padding: 0;
    
    li a {
      display: flex;
      align-items: center;
      padding: 15px 25px;
      color: white;
      text-decoration: none;
      font-size: 16px;
      
      &:hover {
        background-color: #16437e;
      }

      i {
        margin-right: 8px;
        // Icons would be set here using background images or a font
      }
    }
  }
}

// Simple icon placeholders
[class^="icon-"] {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: #fff; // Placeholder color
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

.icon-home { mask-image: url('../assets/icons/home.png'); }
.icon-org { mask-image: url('../assets/icons/org.png'); }
.icon-news { mask-image: url('../assets/icons/news.png'); }
.icon-info { mask-image: url('../assets/icons/info.png'); }
.icon-duty { mask-image: url('../assets/icons/duty.png'); }
.icon-comm { mask-image: url('../assets/icons/comm.png'); }
.icon-services { mask-image: url('../assets/icons/services.png'); }
.icon-special { mask-image: url('../assets/icons/special.png'); }
</style> 